<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>学生信息管理系统--请登录</title>
		<link rel="stylesheet" type="text/css" href="css/login.css"/>
		<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<body>
		<!-- 登录框 -->
		<div class="main">
			<div class="title">
				<h3>请登录哈哈哈哈哈</h3>
<%--				<font id="messageLogin"></font>--%>
			</div>
			<form action=" GetUsersServlet?type=login" method="post">
				<div class="input" >
					<sapn class="img-uname"></sapn>
					<input type="text" name="uname" placeholder="请输入用户名"  />
				</div>
				<div class="input">
					<sapn class="img-pwd"></sapn>
					<input type="password" name="pwd" placeholder="请输入密码" />
				</div>
				<div class="button">
					<input type="submit" value="登录" />
				</div>
			</form>
		</div>
		<!-- 登录框  END -->
		
		<!-- 背景动画 -->
	
		<!-- 背景动画  END -->
	 </body>
	 <script type="text/javascript">
	 	
	 	$(function(){
	 		
	 		$("form").submit(function(){
	 			
	 			// 得到用户名密码
	 			var uname = $("input[name='uname']").val().trim();
	 			var pwd = $("input[name='pwd']").val().trim();
	 			
	 			// 标识变量
	 			var flag = true;
	 			
	 			if(uname==""){
	 				// 获取父元素，给父元素的最后追加子元素
	 				$("input[placeholder='请输入用户名']").parent().append("<div class='loginMes'>您忘记输入用户名了</div>");
	 				flag=false;
	 			}
	 			
	 			
	 			if(pwd==""){
	 				// 获取父元素，给父元素的最后追加子元素
	 				$("input[placeholder='请输入密码']").parent().append("<div class='loginMes'>您忘记输入密码了</div>");
	 				flag= false; 
	 			}
	 			
	 			return flag;
	 		});
	 		
	 		// 给输入框绑定焦点事件
	 		$("input").focus(function(){
	 			var tmp=$(this).next(".loginMes").remove();
	 		});
	 		// 获取cookie中的参数
	 		var mes="${cookie.message.value}";
	 		// 解码
	 		mes=decodeURI(mes); // 得到中文
	 		$("#messageLogin").html(mes);
	 		// 修改cookie的值  清空cookie的临时值
	 		document.cookie="message=";
	 	});
	 	
	 </script>
	 <style>
		.loginMes{
			width: 150px;
			height: 33px;
			background: white;
			text-align: center;
			position: absolute;
			right: -160px;
			top: 6px;
			line-height: 33px;
		}
		.input{
			position: relative;
		}
	</style>
	 
</html>
